<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

</head>
<body>
<div id="app">
    username:<el-input v-model="pageUser.username" placeholder="请输入内容"style="width: 200px"></el-input><br>
    gender:<el-input v-model="pageUser.gender" placeholder="请输入内容"style="width: 200px"></el-input><br>
    email:<el-input v-model="pageUser.email" placeholder="请输入内容"style="width: 200px"></el-input><br>
    <el-button @click="find">查询</el-button>
    <el-button @click="add">添加</el-button>
    <el-table :data="users" stripe>
        <el-table-column prop="id" label="Id"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="gender" label="地址"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
            </el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
    </el-table>
    <div class="add-form">
        <el-dialog title="添加检查项" :visible.sync="addDialogFormVisible">
            <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right"
                     label-width="100px">
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="Id">
                            <el-input v-model="formData.id"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="formData.username"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="gender">
                            <el-input v-model="formData.gender"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="password" prop="password">
                            <el-input v-model="formData.password"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="email" prop="email">
                            <el-input v-model="formData.email"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="handleAdd">确定</el-button>
            </div>
        </el-dialog>
    </div>
    <div class="update-form">
        <el-dialog title="编辑检查项" :visible.sync="editDialogFormVisible">
            <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right"
                     label-width="100px">
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="Id">
                            <el-input :disabled="true" v-model="formData.id"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="formData.username"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="gender">
                            <el-input v-model="formData.gender"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="password" prop="password">
                            <el-input v-model="formData.password"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="email" prop="email">
                            <el-input v-model="formData.email"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="handleEdit">确定</el-button>
            </div>
        </el-dialog>
    </div>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageCurrent"
                :page-sizes="[5, 10, 25, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total=page.total
                style="float: right">
        </el-pagination>
    </div>
</div>
<script>
  new Vue({
      el:"#app",
      data:{
          users: [],
          addDialogFormVisible:false,
          editDialogFormVisible:false,
          formData:{
          },
          rules:{
              username: [{required: true, message: '用户名为必填项', trigger: 'blur'}],
              gender: [{required: true, message: '性别为必填项', trigger: 'blur'}],
              password: [{required: true, message: '密码为必填项', trigger: 'blur'}],
              email: [{required: true, message: '邮箱为必填项', trigger: 'blur'}]
          },
          page:{
              pageSize: 5,
              pageCurrent: 1,
              total:0
          },
          pageUser: {
              "username": "",
              "gender":"",
              "email": ""
          }
      },
      created(){
          this.find();
      },
      methods:{
          handleUpdate(row){
              this.editDialogFormVisible=true;
              axios.get("/users/"+row.id).then(res=>{
                  if(res.data.flag===true){
                      this.formData=res.data.data
                  }else{
                      this.$message.error(res.data.message);
                      this.editDialogFormVisible=false;
                  }
              })
          },
          handleDelete(row){
              this.$confirm("即将永久删除，是否继续","提示",{type:"warning"}).then(()=>{
                  axios.delete("/users/"+row.id).then(res=>{
                      if(res.data.flag===true){
                          this.$message.success(res.data.message);
                      }else{
                          this.$message.error(res.data.message);
                      }
                  })
              })
              this.find();
          },
          handleCurrentChange(page){
              this.page.pageCurrent=page;
              this.find();
          },
          handleSizeChange(size){
              this.page.pageSize=size;
              this.find();
          },
          find() {
              axios.post("/users/" + this.page.pageCurrent + "/" + this.page.pageSize, this.pageUser).then(res => {
                  if(res.data.flag===true){
                      this.users=res.data.data.users
                      this.page.total=res.data.data.total;
                  }else{
                      this.$message.error(res.data.message);
                  }
              })
          },
          add(){
              formData={}
              this.addDialogFormVisible=true;
          },
          cancel(){
              this.editDialogFormVisible=false;
              this.addDialogFormVisible=false;
          },
          handleAdd(){
              axios.post("/users",this.formData).then(res=>{
                  if(res.data.flag===true){
                      this.$message.success(res.data.message);
                      this.addDialogFormVisible=false;
                      this.find
                  }else{
                      this.$message.error(res.data.message);
                  }
              })
          },
          handleEdit(){
              axios.put("/users",this.formData).then(res=>{
                  if(res.data.flag===true){
                      this.$message.success(res.data.message);
                      this.editDialogFormVisible=false;
                      this.find
                  }else{
                      this.$message.error(res.data.message);
                  }
              })
          }
      }
  });
</script>
</body>
</html>